<div class="header">
    <div class="hCon">
        <div class="hLeft">
            <div class="hlLogo" @click="toIndexPage">
                <img src="../static/logo.png" />
            </div>
            <ul class="hlNav">
                <li
                    class="hlnItem"
                    v-for="(item,index) in navList"
                    :class="[index ==  pageid ? 'activeItem':'']"
                    :key="index"
                    v-on:click="jumpPage(item,index)"
                    @mouseenter="showSecondLayerFun(index)"
                >
                    <a href="javascript:;">{{item.txt}}</a>
                </li>
            </ul>
        </div>
        <div class="hRight">
            <div class="hrInp">
                <input type="text" placeholder="请输入项目、课程名称..." />
                <span class="img"></span>
            </div>
            <div class="hrBtn" v-if="!isLoginStatus">
                <p class="btn dlbtn" v-on:click="toLoginPage">登录</p>
                <p class="btn zcbtn">注册</p>
            </div>
            <div class="hrInfo" v-else>
                <p class="txt" :class="pageid == 6 ? 'active' : ''">学习中心</p>
                <p class="img" @mouseenter="toStudyCenterPage">
                    <img src="@/assets/images/top_img.jpg" />
                </p>
            </div>
        </div>
        <!-- <div class="pullDownLayer secondLayer" v-if="showSecondLayer" @mouseleave="showSecondLayer = false">
                <p class="listItem" v-bind:class="curSecondIndex == index ? 'activeItem' : ''" @click="toNextPage(item, index, 1)" v-for="(item,index) in secondNavArr" :key="index">{{item.name}}</p>
            </div> -->
        <div class="pullDownLayer centerLayer" v-if="showCenterLayer" @mouseleave="showCenterLayer = false">
            <p class="txtItem firstItem">管理端</p>
            <p
                class="listItem"
                v-bind:class="currentIndex == index ? 'activeItem' : ''"
                @click="toNextPage(item, index, 6)"
                v-for="(item,index) in navArr"
                :key="index"
            >
                {{item.name}}
            </p>
            <p class="txtItem lastItem" v-on:click="toLoginPage">退出登录</p>
        </div>
    </div>
</div>

<script>
    (() => {
        new Vue({
            el: "#app",
            data: {
                isLoginStatus: false,
                isShowMaskLayer: true,
                currentIndex: -1,
                curSecondIndex: -1,
                navArr: [
                    { name: "我的课程", link: "/my/center/course" },
                    { name: "我的项目", link: "/my/center/project" },
                    { name: "我的讨论", link: "/my/center/discuss" },
                    { name: "我的证书", link: "/my/center/certificate" },
                    { name: "资料设置", link: "/my/center/info" },
                ],
                secondNavArr: [
                    { name: "全部项目", link: "/course/list" },
                    { name: "必修项目", link: "/course/list" },
                    { name: "选修项目", link: "/course/list" },
                ],
                navList: [
                    { link: "/", txt: "全部课程" },
                    { link: "/course/list", txt: "学校云" },
                    { link: "/recommend/list", txt: "公告" },
                    { link: "/notice/list", txt: "国家智慧教育平台" },
                    { link: "/study/list", txt: "关于" },
                ],
                pageid: "",
                showCenterLayer: false,
                showSecondLayer: false,
            },
            mounted() {},
            methods: {
                logOut() {
                    this.isLoginStatus = false;
                    localStorage.removeItem("token");
                },
                toNextPage(item, index, pageid) {
                    if (pageid == 1) {
                        this.curSecondIndex = index;
                        this.currentIndex = -1;
                    } else if (pageid == 6) {
                        this.currentIndex = index;
                        this.curSecondIndex = -1;
                    } else {
                        this.curSecondIndex = -1;
                        this.currentIndex = -1;
                    }
                    this.showCenterLayer = false;
                    this.showSecondLayer = false;
                    this.$router.push({
                        path: item.link + "?pageid=" + pageid + "&typeid=" + index,
                    });
                },
                toStudyCenterPage() {
                    this.showCenterLayer = !this.showCenterLayer;
                },
                toLoginPage() {
                    this.$router.push({
                        path: "/login",
                    });
                },
                toIndexPage() {
                    this.pageid = 0;
                    this.$router.push("/");
                },
                jumpPage(item, index) {
                    this.showSecondLayer = false;
                    this.showCenterLayer = false;
                    this.pageid = index;
                    this.currentIndex = -1;
                    this.curSecondIndex = -1;
                    this.$router.push({
                        path: item.link + "?pageid=" + index,
                    });
                },
            },
        });
    })();
</script>
